<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dl效果</title>
		<style type="text/css">
		*{padding: 0;margin: 0;}
			dl{				
				width:250px;
				height:400px;
				float:left;
				margin: 10px;
			}
			body>div{width:500px; height: 500px; float: left; margin: 10px;}
			p{width:100px; height: 100px; float: left; margin:10px;}		
			dl dt{width:250px;height:300px;background: yellow ;}
			dl dd{width:250px;height:100px;background: blue;}
			
		</style>
	</head>
	<script src="jquery.js"></script>
	<script>
		$(document).ready(function(){
			$(window).load(function(){
				
			function biankuangxiaoguo(obj,color,border,speed){//鼠标移入边框动画效果 对象，背景颜色，边框颜色，动画速度
					for(var i=0;i<obj.length;i++){
						new main(obj.eq(i),color,border,speed)
					}
					//每一个对象都构建一个新的对象方法
					function main(obj,color,border,speed){
					if(!speed){speed=500}//如果没有速度值，那么就默认500毫秒
					obj.css({position:'relative',padding:2,background:color});
					//对这个对象设定css属性，定位和padding
					for(var i=1;i<=6;i++){//创建6个div，并且插入节点
						var box=document.createElement('div');
						$(box).addClass('box'+i);//添加class名
						$(box).css({position:'absolute'})//设置定位属性
						obj.append($(box));//插入节点
					};
					obj.children('.box1').css({display:'block',background:border,left:0,top:0,width:0,height:2});
					obj.children('.box2').css({display:'block',background:border,left:0,top:0,width:2,height:0});
					obj.children('.box3').css({display:'block',background:border,left:0,top:obj.height()+2,width:obj.width()+4,height:2});
					obj.children('.box4').css({display:'block',background:color,left:0,top:obj.height()+2,width:obj.width()+4,height:2});
					obj.children('.box5').css({display:'block',background:border,left:obj.width()+2,top:0,width:2,height:obj.height()+4});
					obj.children('.box6').css({display:'block',background:color,left:obj.width()+2,top:0,width:2,height:obj.height()+4});
					//对这些刚创建的div设定css样式
					
					$(obj).mouseover(function(){//添加mouseover事件
						$(this).children().stop();
						$(this).children('.box1').animate({width:obj.width()+4},speed);
						$(this).children('.box2').animate({height:obj.height()+4},speed);
						
						$(this).children('.box4').animate({width:0},speed);
						
						$(this).children('.box6').animate({height:0},speed);
					}).mouseout(function(){//mouseout事件
						$(this).children().stop();
						$(this).children('.box1').css({display:'block'}).animate({width:0},speed);
						$(this).children('.box2').css({display:'block'}).animate({height:0},speed);
						$(this).children('.box3').css({display:'block'});
						$(this).children('.box4').css({display:'block'}).animate({width:obj.width()+4},speed);
						$(this).children('.box5').css({display:'block'});
						$(this).children('.box6').css({display:'block'}).animate({height:obj.height()+4},speed);
					});
				}					
				}
				
				
				biankuangxiaoguo($('dl,p,body>div'),'pink','#000' );
				
				
				
			})
		})
	</script>
	<body>
		<dl></dl>
		<dl></dl>
		<dl></dl>
		<dl></dl>
		<dl></dl>
		<dl></dl>
		<dl></dl>
		<dl></dl>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<p></p>
		<div></div>
		
	</body>
</html>
